<template>
  <div>
    <h1>{{ fullName }}</h1>
    <h1>{{ fullName }}</h1>
    <h1>{{ fullName }}</h1>

    <h1>{{ fullName1() }}</h1>
    <h1>{{ fullName1() }}</h1>
    <h1>{{ fullName1() }}</h1>
    <h1>{{ fullName2 }}</h1>

    <input type="number" :value="num" @input="inputChange">
    <select name="性别" :id="gender" >
      <option value="1">男</option>
      <option value="0">女</option>
    </select>
    <div>
      <button @click="num--">-</button>
      <input type="number" v-model="num" />
      <button @click="num++">+</button>
    </div>
  </div>
</template>

<script setup>
import { computed, ref, watch, watchEffect } from 'vue';
const firstName = ref('贾')
const lastName = ref('国龙')

// 计算属性（只读）
const fullName = computed(() => {
  // console.log('计算属性fullName被调用了');
  return firstName.value + lastName.value
})

const fullName1 = () => {
  // console.log('方法fullName1被调用了');
  return firstName.value + lastName.value
}
// setter getter (读写)
const fullName2 = computed({
  // 读取
  get() {
    return firstName.value + lastName.value
  },
  // 写入
  set(value) {
    // console.log(value);
    firstName.value = value.slice(0, 1)
    lastName.value = value.slice(1)
  }
})
setTimeout(() => {
  fullName2.value = '罗永浩'
}, 3000);

// 监听单个数据
watch(firstName, (newValue, oldValue) => {
  console.log(newValue, oldValue);
})
watch(fullName, (newValue, oldValue) => {
  console.log(newValue, oldValue);
})
// 监听多个数据
watch([firstName, lastName], ([newFirstName, newLastName], [oldFirstName, oldLastName]) => {
  console.log(newFirstName, oldFirstName);
  console.log(newLastName, oldLastName);
})
// 监听对象
const user = ref({
  firstName: '贾',
  lastName: '国龙'
})
watch(user, (newValue, oldValue) => {
  console.log(newValue, oldValue);
}, { deep: true })
setTimeout(() => {
  user.value.firstName = '罗'
}, 3000);

// 立即执行
watch(user, (newValue, oldValue) => {
  console.log(newValue, oldValue);
  
}, { immediate: true, deep: true })


const gender = ref(0)
const num = ref(0)
watchEffect(() => {
  // console.log(user.value.firstName)
  // console.log(firstName);
  console.log(gender.value);
  console.log(num.value); 
})

const inputChange = (e) => {
  num.value = e.target.value
}

</script>

<style scoped>

</style>